<template>
  <li @mouseenter="handleShow(true)" @mouseleave="handleShow(false)" :class="{ active: enterStatus }">
    <label>
      <input type="checkbox" v-model="todo.complete" />
      <span>{{ todo.title }}</span>
    </label>
    <button v-show="enterStatus" @click="delItem" class="btn btn-danger" style="display: none">
      删除
    </button>
  </li>
</template>

<script>
export default {
  props: {
    todo: Object,
    index: Number,
    delTodo: Function
  },
  data () {
    return {
      enterStatus: false
    }
  },
  methods: {
    handleShow (status) {
      this.enterStatus = status
    },
    delItem () {
      const {todo, index} = this
      if (window.confirm(`你确定删除${todo.title}的选项吗?`)) {
        this.delTodo(index)
      }
    }
  }
}
</script>

<style>
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

li.active {
  background-color: darkgray;
}
</style>
